<template>
  <n-el tag="div" class="div-two02-three01">
    <n-el tag="div" class="main-box" v-for="item in data_list" :key="item">
      <span class="span-one">
        {{ item.shop }}
      </span>
      <n-el tag="div" class="image-box">
        <n-image
          :src="getImageOnLocal(item.img)"
          lazy
          preview-disabled
          width="200"
          height="180"
          @click="toForecast(item)"
        ></n-image>
      </n-el>
      <n-el tag="div" class="info-box">
        <a class="book-title" :href="item.link">{{
          handleTitle(item.title)
        }}</a>
      </n-el>
      
      <span style="width: 150px;height: 100px;background-color: #292929a4; font-size: 20px"
          >价格：{{ item.price }}</span>
          
      <span style="width: 150px;height: 100px;background-color: #292929a4; font-size: 20px"
          >评分：{{ item.commit }}</span>
    </n-el>
  </n-el>
  <n-el tag="div" class="div-two02-three03">
    <n-pagination
      v-model:page="data_list_page"
      :page-count="data_list_total_page"
      @update-page="pageChange"
    />
  </n-el>
</template>


<script setup lang="ts" name="HZForecast05">
import { onMounted } from "vue";
import * as curdApi from "/@api/hz-curd-api";
import { ref, inject } from "vue";

const props = defineProps({
  id: {
    type: String,
    default: "pie-simple",
  },
  showTitle: {
    type: Boolean,
    default: true,
  },
  showLegend: {
    type: Boolean,
    default: true,
  },
  showTooltip: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: "信息卡片",
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  apiPath: {
    // api路径
    type: String,
    default: "",
  },
  chartsType: {
    // 图表类型
    type: String,
    default: "HZForecast05",
  },
  methodType: {
    type: String, // 请求方式
    default: "get",
  },
});

// 通过 inject 函数将父组件提供的 sendMessage 函数注入进来
// 提供类型注解告诉 TypeScript 这是一个函数
const sendMessage = inject("sendMessage") as (msg: Map<string, any>) => void;

const data = ref("");

const isShowAll = ref(true);
const state = reactive({
  staffWordCountTimer: null,
});
const data_list = ref([]);
const data_list_category = ref(0);
const data_list_page = ref(1);
const data_list_total_page = ref(1);

onMounted(() => {
  loadDataList();
});

function categoryChange(category: any) {
  // 如果切换的是同一个分类，不做处理
  if (data_list_category.value === category) {
    return;
  }
  // 切换显示的内容
  if (category === 0) {
    isShowAll.value = true;
    // 销毁所有定时器
    if (state.staffWordCountTimer != null) {
      clearInterval(state.staffWordCountTimer);
    }
  } else {
    isShowAll.value = false;
  }
  data_list_category.value = category;
  data_list_page.value = 1;
  loadDataList();
}

function getImageOnLocal(url: string) {
  if (url == null || url.includes("http")) {
    return url;
  }
  return "https:" + url.replace(".avif", "");
}

function loadDataList() {
  getCom().then((res: any) => {
    data_list.value = res.data.items;
    data_list_total_page.value = res.data.totalPage;
    toForecast(data_list.value[0]);
  });
}

const getCom = async () => {
  return await curdApi.goGet(
    {
      category: data_list_category.value,
      page: data_list_page.value,
      size: 30,
    },
    "/api/jd/JdGood/"
  );
};

function pageChange(page: any) {
  data_list_page.value = page;
  loadDataList();
}

function toForecast(msg: any) {
  if (sendMessage) {
    let map: Map<string, any> = new Map();
    map.set("HZForecast05", msg);
    sendMessage(map);
  }
}

const refreshCharts = (newData: any) => {
  data_list_category.value = newData;
  loadDataList();
  categoryChange(newData);
};

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
});

// 处理标题
function handleTitle(text: string) {
  if (text == null) {
    return text;
  }
  text = text
    .replace('<font class="skcolor_ljg">', "")
    .replace("</font>", "")
    .replace('<font class="skcolor_ljg">', "")
    .replace("</font>", "");
  return text;
}
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}

.div-two02-three01 {
  width: 100%;
  height: 93%;
  display: flex;
  flex-direction: row;
  overflow: auto;
  justify-content: center;
  flex-wrap: wrap;
  max-height: 108vh; /* 在这里可以设置你希望的最大高度 */
}

.main-box {
  width: 27%;
  height: 45%;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  transform: scale(0.9);
  background-color: #3636368e;
  border: 1px solid #ccc;
  transition: background-color 0.3s ease;
  cursor: pointer; /* Add this line */
  margin-left: 1%;
}

.main-box:hover {
  background-color: #73737377;
}

.main-box:active {
  border-color: #2b2b2b79;
  background-color: #2b2b2b79;
}

.div-two02-three03 {
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label-right-top {
  position: absolute;
  right: -10px;
  top: -5px;
  padding: 2px 6px;
  background-color: #007bff;
  color: white;
  border-radius: 8px;
  font-size: 14px;
}

.stock-code {
  position: absolute;
  left: 10px;
  top: 10px;
}

.span-one {
  position: absolute;
  top: 0;
  right: 0;
  color: #ffffff;
  font-size: 12px;
  margin: 4px;
  background: coral;
}

.image-box {
  width: 100%;
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.info-box {
  width: 100%;
  height: 20%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-weight: 600;
}
.book-title {
  text-decoration: none; /* 去掉文本下划线 */
  font-size: 12px; /* 设置字体大小 */
  color: #079992; /* 设置字体颜色 */
  font-weight: bold; /* 设置字体为粗体 */
  background: #ecf0f1; /* 设置背景色 */
  padding: 8px; /* 设置内边距 */
  border-radius: 5px; /* 设置边角圆滑 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 设置投影增加立体感 */
}

.book-title:hover {
  color: #16a085; /* 鼠标悬浮时改变字体颜色 */
  background: #bdc3c7; /* 鼠标悬浮时改变背景色 */
}
</style>